<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/js/layui.js"></script>
</head>
<body>
    <div class="layui-container">
<!--        定义行-->
        <div class="layui-row">
<!--            定义列-->
            <div class="layui-col-md5" style="background-color: #00aff0">
                行的5/12
            </div>
            <div class="layui-col-md7" style="background-color: grey">
                行的7/12
            </div>
        </div>

<!--        定义行-->
        <div class="layui-row">
<!--            定义列-->
            <div class="layui-col-md2" style="background-color: grey">
                行的2/12
            </div>
            <div class="layui-col-md3" style="background-color: gold">
                行的3/12
            </div>
            <div class="layui-col-md8" style="background-color: dodgerblue">
                行的8/12
            </div>
        </div>
        <br><br>

        <h3>列间距</h3>
        <br>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div style="background-color: gold">4</div>
            </div>
            <div class="layui-col-md4">
                <div style="background-color: green">4</div>
            </div>
            <div class="layui-col-md4">
                <div style="background-color: hotpink">4</div>
            </div>
        </div>
        <hr>

        <h3>列偏移</h3>
        <br>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div style="background-color: gold">4</div>
            </div>
            <div class="layui-col-md4 layui-col-md-offset4">
                <div style="background-color: green">向右偏移4栅格</div>
            </div>
        </div>
        <hr>
    </div>
</body>
</html>